<template>
  <div class="register-form">
    <div class="register-form-info">
      <div class="info-box">
        <div class="info-text"><span style="color:red">*</span>&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名: </div>
        <div class="info-input"><input type="text" v-model="name" placeholder="请填写你的真实姓名" ></div>
      </div>
      <div class="info-box">
        <div class="info-text"><span style="color:red">*</span>&nbsp;电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</div>
        <div class="info-input"><input type="text" v-model="phone" placeholder="请输入电话" ></div>
      </div>
      <!-- <div class="info-box">
        <div class="info-text"><span style="color:red">*</span>&nbsp;微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信:</div>
        <div class="info-input"><input type="text" v-model="wechat" placeholder="请填写你的微信"></div>
      </div> -->
      <div class="info-box">
        <div class="info-text"><span style="color:red">*</span>&nbsp;医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院:</div>
        <!-- <div class="info-input" @click="showPickerHosptial=true" > {{hospital_name||'请选择医院'}}</div> -->
        <div class="info-input"><input type="text" v-model="hospital_id" placeholder="请输入医院" ></div>
      </div>
      <div class="info-box">
        <div class="info-text"><span style="color:red">*</span>&nbsp;科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室:</div>
        <!-- <div class="info-input" @click="showPickerDep=true" >{{dep_name||'请选择科室'}}</div> -->
        <div class="info-input"><input type="text" v-model="dep_id" placeholder="请输入科室" ></div>
      </div>
      <div class="info-box">
        <div class="info-text"><span style="color:red">*</span>&nbsp;职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</div>
        <div class="info-input" ><input type="text" v-model="station" placeholder="请填写你的职称" ></div>
      </div>
      
      <div class="activity-payment">
        <div class="activity-payment-text">&nbsp;性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</div>
          <div class="activity-payment-money">
            <van-radio-group v-model="sex">
              <van-radio :name="0" checked-color="#2aa7e1">男</van-radio>
              <van-radio :name="1" checked-color="#2aa7e1">女</van-radio>
            </van-radio-group>
        </div>
      </div>
      <div class="activity-payment">
        <div class="activity-payment-text">是否住宿:</div>
        <div class="activity-payment-money">
            <van-radio-group v-model="hotel">
            <van-radio :name="1" checked-color="#2aa7e1">是</van-radio>
            <van-radio :name="0" checked-color="#2aa7e1">否</van-radio>
            </van-radio-group>
        </div>
      </div>
      <div class="info-box" v-show="hotel==1">
        <div class="info-text">&nbsp;住宿费用</div>
        <div class="info-input">{{hotelCost}}</div>
      </div>
      <!-- <div class="activity-payment">
        <div class="activity-payment-text">个人简介(选填):</div>
        <div class="activity-payment-money">
            <textarea name="" id="" cols="30" rows="10" v-model="intro" placeholder="请输入个人简介"></textarea>
        </div>
      </div> -->
      <div class="activity-payment">
        <div class="activity-payment-text">会务费:</div>
        <div class="activity-payment-money">￥{{cost}}</div>
      </div>
      <div class="activity-payment">
        <div class="activity-payment-text" style="fontWeight:600">合计:</div>
        <div class="activity-payment-money" style="color:red;fontWeight:600">￥{{totalCost}}</div>
      </div>
      <div class="activity-payment">
        <div class="activity-payment-text">支付方式:</div>
        <div class="activity-payment-money">
            <van-radio-group v-model="radio">
            <van-radio :name="1" checked-color="#2aa7e1">线上</van-radio>
            </van-radio-group>
        </div>
      </div>

    </div>
    <div class="register-form-btn" @click="reqbuildOrder">提交</div>

    <!-- 科室选择器 -->
    <van-popup v-model="showPickerDep" position="bottom">
      <van-picker :columns="depOptions" @cancel="onCancelDep" @confirm="onConfirmDep" value-key="dep_name" show-toolbar title="选择科室">
      </van-picker>
    </van-popup>
    <!-- 医院选择器 -->
      <van-popup v-model="showPickerHosptial" position="bottom">
          <van-picker :columns="hospitalOptions" @cancel="onCancelHospital" value-key="name" @confirm="onConfirmHospital" show-toolbar title="选择医院">
          </van-picker>
        </van-popup>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import { RadioGroup, Radio,Toast,Dialog,Picker } from 'vant';
export default {
  data(){
    return{
      showPickerHosptial:false,//医院选择器
      showPickerDep:false,//科室选择器
      radio:1,
      activityID:'',
      cost:'',
      guestCost:'',
      isGuest:'',
      isShowFellow:false,
      name:'',
      phone:'',
      wechat:'',
      fellowInfo:[{name:"", phone:"", position:""}],
      orderNum: '',
      userToken: '',
      radioData:[{name:'线上',value:'online',checked:true},{name:'线下',value:'offline'}],
      radioFlag:false,//能否选择支付方式
      payType:'online',//默认线上支付
      webView: false,
      sex:0,//性别
      hotel:0,//是否住宿
      hotelCost:'',//住宿费用
      intro:'',//个人简介
      doctorInfo:'',//医生信息
      station:'',//职称
      dep_name:'',
      dep_id:'',//科室id
      hospital_name:'',
      hospital_id:'',//医院id
      hospitalOptions: [],
      depOptions: []
    }
  },
  computed:{
    ...mapState(['userInfo']),
    totalCost(){
      if(this.hotel==1){
        return +this.hotelCost+ +this.cost
      }
      return +this.cost
      
    }
  },
  watch: {
    hotel(nval){
      this.getActivityRegistrationFee(nval)
    }
  },
  mounted() {
      let params=this.$route.params;
    this.activityID = params.id;
    this.cost = params.cost;
    this.guestCost = params.guest_cost;
    this.isGuest = params.is_guest||1;
    this.getActivityRegistrationFee(0);
    this.getAllHospital();
    this.getDoctorInfo()
  },

  methods:{
    onConfirmDep(e){
      //选择医院
      this.dep_name=e.dep_name;
      this.dep_id=e.id;
      this.showPickerDep=false;
      
    },
    onCancelDep(){
      //取消选择科室
      this.showPickerDep=false
    },
    onConfirmHospital(e){
      //选择医院
      this.hospital_name=e.name;
      this.hospital_id=e.id;
      this.showPickerHosptial=false;
      this.dep_name='';
      this.dep_id='';
      this.getAllDep(e.id)

    },
    onCancelHospital(e){
      //取消选择医院
      this.showPickerHosptial=false
    },
    async getAllHospital(){
      //获取所有医院
      let res=await this.$api.getAllHospital();
      if(res.level=='success'){
        this.hospitalOptions=res.data
      }
    },
    async getAllDep(id){
      //获取科室
      let params={
        hospital_id:id
      }
      let res=await this.$api.getAllDep(params);
      if(res.level=='success'){
        this.depOptions=res.data
      }
    },
    async getActivityRegistrationFee(hotel){
      //获取会议费用
      let res=await this.$api.getActivityRegistrationFee({activity_id:this.activityID,is_accommodation:hotel})
      if(res.level=='success'){
        this.hotelCost=res.accommodation_cost;
        
      }
    },
    checkboxChange: function(e) {
      this.isShowFellow = !this.isShowFellow;
    },
    addFellow(){
      this.fellowInfo.push({name:"", phone:"", position:""});
    },
    //创建活动订单
    async reqbuildOrder(){
      let params = {
        real_name:this.name,
        phone:this.phone,
        station:this.station,
        sex:this.sex,
        hospital_id:this.hospital_id,
        dep_id :this.dep_id,
        // personal_profile:this.intro,//简介
        is_accommodation:this.hotel,
        activity_id: this.activityID,
        real_name: this.name,
        phone: this.phone,
        is_guest: this.isShowFellow ? 1 : 0,
        guest_info: this.isShowFellow ? this.fellowInfo : [],
      };
      let res = await this.$api.postbuildOrder(params);
      if(res.level == "success"){
        this.orderNum = res.data.order_num;
        this.pay()
      }else{
        Toast({
          message: res.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
     async pay(){
      //下单
        
      var _this = this;
      Dialog.confirm({
                        title: '确认参加',
                    }).then(async() => {

                        let resPay = await _this.$api.buildOrdersH5({
                            order_num:_this.orderNum
                          });
                        if (resPay.level == "success") {
                          if(resPay.data.ispay==1){//免费活动
                            Toast({
                              message:resPay.message,
                              icon:'none',
                              duration:1500
                            })
                            setTimeout(() => {
                                    _this.$router.push({
                                      name:'ActivityDetail',
                                      query:{
                                        id: _this.activityID
                                      }
                                    })
                            }, 1500)
                            return
                          }
                            _this.WXPayment(resPay.data);
                        }
                    }).catch((e) => {
                        // console.log(e);
                    });
    },
      WXPayment(data)
                {
                    var _this = this;
                    if (typeof WeixinJSBridge === 'undefined') {
                        _this.$currency.showToast('请在微信在打开页面', '1500', 'fail');
                        return false;
                    }
                    WeixinJSBridge.invoke('getBrandWCPayRequest', data, function (res) {
                        switch (res.err_msg) {
                            case 'get_brand_wcpay_request:cancel':
                                _this.$currency.showToast('用户取消支付！', '1500', 'fail');
                                break;
                            case 'get_brand_wcpay_request:fail':
                                _this.$currency.showToast('支付失败！(' + res.err_desc + ')', '1500', 'fail')
                                break;
                            case 'get_brand_wcpay_request:ok':
                                _this.$currency.showToast('支付成功,正在跳转', '1000', 'fail')
                                setTimeout(() => {
                                        _this.$router.push({
                                          name:'ActivityDetail',
                                          query:{
                                            id: _this.activityID
                                          }
                                        })
                                }, 1500)
                                break;
                            default:
                                break;
                        }
                    });
                },

    // subimitBtn(){
    //     this.activitySignUpOffline();//线下支付
    // },
    radioChange(e){
      //改变支付方式
      const list=this.radioData;
      const newList= list.map(val=>{
        let obj={};
        if(val.value==e.target.value){
          obj.checked=true;
          obj.name=val.name;
          obj.value=val.value;
        }else{
          obj.checked=false;
          obj.name=val.name;
          obj.value=val.value;
        }
        return obj
      })
      this.radioData=newList;
      this.payType=e.target.value
    },
    async getDoctorInfo(){
      //获取医生信息
      let res =await this.$api.getDoctorInfo({activity_id:this.activityID});
      if(res.level=='success'){
        this.doctorInfo=res.data;
        this.name=this.doctorInfo.real_name||'';
        this.phone=this.doctorInfo.phone||'';
        this.hospital_name=this.doctorInfo.hospital_name;
        this.dep_name=this.doctorInfo.dep_name;
      }
    }

  }
}
</script>

<style lang="scss" scoped>
  .register-form{
    width: 100%;
    min-height: 100vh;
    background-color: #f1f1f1;
    // padding-top: 20px;
    padding-bottom: 85px;
    .register-form-info{
      width: 100%;
      background-color: #fff;
      .info-box{
        border: 1px solid #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding:20px 10px;
        .info-text{
          flex: 1;
          text-align: center;
          font-size: 26px;
        }
        .info-input{
          flex: 2;
          font-size: 26px;
        }
      }
      .activity-payment,
      .activity-fellow{
        border: 1px solid #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        padding: 20px;
        .activity-payment-text,
        .activity-fellow-text{
          flex: 1;
          text-align: center;
        }
        .activity-payment-money,
        .activity-fellow-yes{
          flex: 2;
          .radio{
            margin-left: 20px;
          }
        }
      }
      .activity-fellow-content{
        padding: 0 10px 10px;
        font-size: 26px;
        .activity-fellow{
          border: none;
          .activity-fellow-text{
            flex: 3;
            text-align: center;
          }
          .activity-fellow-money{
            flex: 5;
          }
        }
        .activity-fellow-info{
          border: 1px rgb(110, 189, 235) solid;
          border-radius: 6px;
          margin-bottom: 20px;
          .info-box{
            border: none;
            font-size: 26px;
          }
        }
        .add-fellow-info{
          width: 300px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background-color: rgb(110, 189, 235);
          margin: 0 auto;
          color: #fff;
          font-size: 28px;
          border-radius: 4px;
        }
      }
    }
    .register-form-btn{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      text-align: center;
      line-height: 80px;
      background-color: rgb(110, 189, 235);
      color: #fff;
      font-size: 28px;
      :active{
        background-color: rgb(6, 127, 240);
      }
      z-index: 9999
    }
  }
  .radio{
    margin-right: 20px;
  }
  input{
    border:none
  }
</style>
<style >
  .register-form .van-radio-group
  {
    display: flex
  }
  .register-form .van-radio{
    margin: 0 20px;
  }
</style>